import { lazy } from 'react'
import { useRoutes } from 'react-router-dom'
import MyLayout from '@/layout/index.jsx'
import NotFound from '@/views/NotFound.jsx'
import Login from '@/views/Login.jsx'
import Auth from '@/components/auth/index.jsx'
import { HomeFilled, AccountBookOutlined, AlignRightOutlined } from '@ant-design/icons'

const Home = lazy(() => import('@/views/Home.jsx'))
const List = lazy(() => import('@/views/List.jsx'))
const My = lazy(() => import('@/views/My.jsx'))

export const dynamicRoutes = [
  {
    index: true,
    element: <Home />,
    meta: {
      label: 'Home',
      icon: <HomeFilled />
    }
  },
  {
    path: '/list',
    element: <List />,
    meta: {
      label: 'List',
      icon: <AlignRightOutlined />
    }
  },
  {
    path: '/my',
    element: <My />,
    meta: {
      label: 'My',
      icon: <AccountBookOutlined />
    }
  }
]

const staticRoutes = [
  {
    path: '/login',
    element: <Login />,
    meta: { label: 'Login' }
  },
  {
    path: '/',
    element: <MyLayout />,
    children: dynamicRoutes
  },
  {
    path: '*',
    element: <NotFound />
  }
]

const WrapperRouter = () => {
  const element = useRoutes(staticRoutes)
  return <Auth>{element}</Auth>
}

export default WrapperRouter
